<template>
  <div class="author-hot-source-card-wrapper">
    <h2 class="title">其他热门文章</h2>
    <ul class="source-list">
      <li
        v-for="(source, idx) in sources"
        :key="idx"
        @click="gotoSource(source)"
      >
        <span>{{ source.title }}</span>
        <i class="iconfont icon-eye"></i>
        <em>{{ source.readTimes }}</em>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'

defineProps<{
  sources: App.Source[]
}>()

const router = useRouter()
function gotoSource(source: App.Source) {
  router.push(`/source/${source.id}`)
}
</script>

<style lang="scss" scoped>
.author-hot-source-card-wrapper {
  --w: var(--authorHotSourceCardWidth);
  --fs: calc(var(--w) / 20);
  box-sizing: border-box;
  width: var(--w);
  padding: var(--fs);
  background-color: white;
  border-radius: calc(var(--w) / 40);

  .title {
    padding-left: 5%;
    line-height: 2.5;
    font-size: var(--fs);
    font-weight: bold;
    color: var(--black);
    border-bottom: 1px solid var(--gray);
  }

  .source-list {
    margin-top: calc(var(--fs) / 2);
    text-align: left;

    li {
      position: relative;
      margin-top: 2%;
      line-height: 2.5;
      font-size: calc(var(--fs) * 0.9);

      padding: 0 5%;
      border-radius: calc(var(--fs) * 0.4);

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      span {
        float: left;
        display: block;
        max-width: 70%;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      &:hover {
        color: var(--darkBlue);
        background-color: var(--slightBlue);
        cursor: pointer;
      }

      i,
      em {
        float: right;
        line-height: calc(2.5 * var(--fs));
      }

      i {
        margin-left: calc(var(--fs) * 0.5);
      }
    }
  }
}
</style>
